@mixin snapcraft-metrics {
  $semi-transparent-white: rgba(255, 255, 255, .8);

  .snapcraft-metrics__graph {
    opacity: 0;
    position: relative;
    transition: opacity .333s;

    .p-tooltip {
      position: absolute;
      z-index: 100;

      .p-tooltip__message {
        display: block;
      }
    }

    .domain {
      display: none;
    }

    .tick line {
      stroke: $color-mid-light;
    }

    .area-label {
      pointer-events: none;

      &.is-hidden {
        display: none;
      }
    }
  }


  .is-empty {
    h3,
    hr,
    .p-heading--three {
      color: $color-mid-light;
    }

    svg {
      opacity: .4;
      pointer-events: none;
    }
  }

  .snapcraft-metrics__loader {
    background: $semi-transparent-white;
    font-size: .75rem;
    left: 50%;
    line-height: 2rem;
    margin-left: -.5rem;
    margin-top: -.5rem;
    padding: 0 .5rem;
    position: absolute;
    top: 50%;

    .p-icon--spinner {
      margin-right: .5rem;
      vertical-align: middle;
    }
  }
 }
